<template>
  <el-container class="container">
    <el-header class="header">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="人员搜索 :">
          <el-input
            v-model="queryObj.userName"
            placeholder="请输入"
            class="inputForm"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="btn"
            icon="el-icon-search"
            @click="searchName"
          >查询
          </el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main class="mian">
      <el-button
        type="warning"
        class="warn"
        icon="el-icon-circle-plus-outline"
        @click="addPerson('add')"
      >
        新建
      </el-button>

      <!-- table表格 -->
      <el-table
        v-loading="loading"
        :data="personnelList"
        style="width: 100%"
        highlight-current-row
        :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
      >
        <el-table-column prop="date" label="序号" type="index" />
        <el-table-column prop="userName" label="人员名称" />
        <el-table-column prop="regionName" label="归属区域" />
        <el-table-column prop="role.roleName" label="角色" />
        <el-table-column prop="mobile" label="联系电话" />
        <el-table-column prop="address" label="操作">
          <template #default="{ row }">
            <span
              class="updata"
              @click="editPerson(row.id, 'edit')"
            >修改
            </span>
            <span class="del" plain @click="delPeople(row.id)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer class="footer">
      <pageSize
        class="pagesize"
        :info="queryObj"
        @handleCurrentChange="handleCurrentChange"
      />
    </el-footer>
    <!-- 弹窗 -->
    <addPersonDialog
      :id="id"
      ref="addPersonDialog"
      :show-person-dialog.sync="showPersonDialog"
      :personnel-list="personnelList"
      :type="type"
      :per-detail="perDetail"
      @getPersonData="getPersonData"
    />
  </el-container>
</template>

<script>
import pageSize from '@/views/equipment/components/page-tool.vue'
import addPersonDialog from './components/addPersonDialog.vue'
import { getPersonList, removePerson } from '@/api/personnel/personnel'
export default {
  components: {
    pageSize,
    addPersonDialog
  },
  data() {
    return {
      loading: true,
      userName: '',
      type: 'add',
      id: 0,
      showPersonDialog: false,
      search: '',
      personnelList: [],
      queryObj: {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 10,
        totalPage: 10

      },
      perDetail: {}
    }
  },
  async created() {
    this.getPersonData()
  },
  methods: {
    async getPersonData() {
      this.loading = true
      const res = await getPersonList(this.queryObj)
      this.queryObj.pageIndex = res.pageIndex
      this.queryObj.pageSize = res.pageSize
      this.queryObj.totalCount = res.totalCount
      this.queryObj.totalPage = res.totalPage
      this.personnelList = res.currentPageRecords
      // this.queryObj.userName = res.currentPageRecords.userName
      this.userName = res.currentPageRecords.userName
      this.loading = false
    },
    // 搜索
    async searchName() {
      this.loading = true
      await getPersonList(this.userName)
      await this.getPersonData()
      this.loading = false
    },
    async delPeople(id) {
      await removePerson(id)
      this.getPersonData()
      this.$notify.info({
        title: '提示',
        message: '删除成功'
      })
    },
    async editPerson(id, type) {
      this.id = id
      this.showPersonDialog = true
      this.type = type
      this.$nextTick(() => {
        this.$refs.addPersonDialog.getPersonDetail()
      })
    },
    addPerson(type) {
      this.showPersonDialog = true
      this.type = type
    },
    // 点击下一页
    handleCurrentChange(val) {
      if (val > this.queryObj.totalPage) {
        this.queryObj.pageIndex = this.queryObj.totalPage
      } else {
        this.queryObj.pageIndex = val
        this.getPersonData()
      }
    }
  }
}
</script>

<style scoped lang="scss">
h2 {
  margin-top: 70px;
}

.container {
  margin: 20px;
  margin-top: 80px;
  .header {
    background-color: #fff;
    height: 65px;
    padding-top: 10px;
  }
   .footer {
    background-color: #fff;
    height: 100px !important;
  }
  .mian {
    margin-top: 20px;
    background-color: #fff;
  }
  .btn {
    background-color: #5f84ff;
  }
}
.inputForm {
  border-radius: 4px;
  height: 36px;
  width: 210px;
}
.warn {
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  margin-bottom: 20px;
}
.del {
  color: #ff5e20;
  font-size: 14px;
  cursor: pointer;
}
.updata {
  margin-right: 10px;
  color: #5f84ff;
  cursor: pointer;
}
</style>
